
<template>
  <div class="h100">
    <div class="display-flex mt30 pd h100 page-box pr">
      <div class="page-left h100 display-flex czbj">
        <div class="content page-border-style-b flex-1">
          <div class="content-title">
            <img
              src="../assets/img/content-title-icon-a.png"
              class="content-title-icon mr10"
            />
            概况
            <span></span>
          </div>
          <div class="panel-box general-situation-box czbj">
            <HorizontalProgress
              Hlabel="发鞋"
              unit="双"
              numericalValue="325"
              plan="70"
            ></HorizontalProgress>
            <HorizontalProgress
              Hlabel="发衣(男)"
              numericalValue="325"
              unit="套"
              plan="60"
            ></HorizontalProgress>
            <HorizontalProgress
              Hlabel="发衣(女)"
              numericalValue="183"
              unit="套"
              plan="50"
            ></HorizontalProgress>
            <HorizontalProgress
              Hlabel="存衣(男)"
              numericalValue="131"
              unit="套"
              plan="40"
            ></HorizontalProgress>
            <HorizontalProgress
              Hlabel="存衣(女)"
              numericalValue="183"
              unit="套"
              plan="80"
            ></HorizontalProgress>
            <HorizontalProgress
              Hlabel="回收(衣)"
              numericalValue="131"
              unit="套"
              plan="90"
            ></HorizontalProgress>
            <HorizontalProgress
              Hlabel="回收(鞋)"
              numericalValue="183"
              unit="套"
              plan="30"
            ></HorizontalProgress>
          </div>
        </div>
        <div class="content page-border-style-a mt30">
          <div class="content-title">
            <img
              src="../assets/img/content-title-icon-b.png"
              class="content-title-icon mr10"
            />
            发鞋机使用情况
            <span></span>
          </div>
          <div class="panel-box display-flex Send-shoes-machine h100">
            <div class="Send-shoes-machine-left h100 vertical-center">
              <div>
                <n-progress
                  type="circle"
                  :percentage="32"
                  :stroke-width="10"
                  color="#FFC57E"
                  rail-color="#000631"
                  :offset-degree="60"
                >
                  <div class="nowrap">
                    <span style="text-align: center" class="cf fz40"
                      >32<span class="fz18">双</span></span
                    >
                  </div>
                </n-progress>
                <p class="cf fz18 mt20">手术鞋剩余量</p>
              </div>
            </div>
            <div class="flex-1 Send-shoes-machine-right">
              <div class="Send-shoes-machine-panel display-flex">
                <div class="Send-shoes-machine-panel-label vertical-center">
                  男鞋
                </div>
                <div class="flex-1 Send-shoes-machine-panel-right">
                  <span class="cf fz18">L</span>
                  <span class="fz18 red">0</span>
                  <span class="cf fz18">M</span>
                  <span class="cf fz18">8</span>
                  <span class="cf fz18">XL</span>
                  <span class="cf fz18">6</span>
                </div>
              </div>
              <div class="Send-shoes-machine-panel display-flex">
                <div
                  class="Send-shoes-machine-panel-label vertical-center girl"
                >
                  女鞋
                </div>
                <div class="flex-1 Send-shoes-machine-panel-right">
                  <span class="cf fz18">L</span>
                  <span class="fz18 red">0</span>
                  <span class="cf fz18">M</span>
                  <span class="cf fz18">8</span>
                  <span class="cf fz18">XL</span>
                  <span class="cf fz18">6</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content page-border-style-a mt30">
          <div class="content-title">
            <img
              src="../assets/img/content-title-icon-c.png"
              class="content-title-icon mr10"
            />
            发衣服情况
            <span></span>
          </div>

          <div class="panel-box display-flex Send-shoes-machine h100">
            <div
              class="
                Send-shoes-machine-left
                h100
                Send-shoes-machine-right
                Hair-condition
              "
            >
              <div class="vertical-center">
                <div>
                  <n-progress
                    type="circle"
                    :percentage="32"
                    :stroke-width="10"
                    color="#00B7FF"
                    rail-color="#000631"
                    :offset-degree="60"
                  >
                    <div class="nowrap">
                      <span style="text-align: center" class="cf fz16"
                        >47套</span
                      >
                    </div>
                  </n-progress>
                  <p class="fz16 cf">手术衣(男)剩余量</p>
                </div>
              </div>
              <div class="vertical-center">
                <div>
                  <n-progress
                    type="circle"
                    :percentage="32"
                    :stroke-width="10"
                    color="#FF4CA8 "
                    rail-color="#000631"
                    :offset-degree="60"
                  >
                    <div class="nowrap">
                      <span style="text-align: center" class="cf fz16"
                        >47套</span
                      >
                    </div>
                  </n-progress>
                  <p class="fz16 cf">手术衣(女)剩余量</p>
                </div>
              </div>
            </div>
            <div class="flex-1 Send-shoes-machine-right">
              <div class="Send-shoes-machine-panel display-flex">
                <div class="Send-shoes-machine-panel-label vertical-center">
                  男鞋
                </div>
                <div class="flex-1 Send-shoes-machine-panel-right">
                  <span class="cf fz18">L</span>
                  <span class="fz18 red">0</span>
                  <span class="cf fz18">M</span>
                  <span class="cf fz18">8</span>
                  <span class="cf fz18">XL</span>
                  <span class="cf fz18">6</span>
                </div>
              </div>
              <div class="Send-shoes-machine-panel display-flex">
                <div
                  class="Send-shoes-machine-panel-label vertical-center girl"
                >
                  女鞋
                </div>
                <div class="flex-1 Send-shoes-machine-panel-right">
                  <span class="cf fz18">L</span>
                  <span class="fz18 red">0</span>
                  <span class="cf fz18">M</span>
                  <span class="cf fz18">8</span>
                  <span class="cf fz18">XL</span>
                  <span class="cf fz18">6</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-1 h100 display-flex czbj ml20">
        <div class="content page-border-style-e">
          <div class="content-title">
            <img
              src="../assets/img/content-title-icon-d.png"
              class="content-title-icon mr10"
            />
            预警
            <span></span>
          </div>
          <div class="panel-box ab">
            <n-grid :cols="4" class="cen cf">
              <n-gi>
                <img src="../assets/img/early-warning-a.png" />
                <p class="fz24">男鞋</p>
                <div class="size-text">L</div>
              </n-gi>
              <n-gi>
                <img src="../assets/img/early-warning-b.png" />
                <p class="fz24">女鞋</p>
                <div class="size-text ab">L</div>
              </n-gi>
              <n-gi>
                <img src="../assets/img/early-warning-c.png" />
                <p class="fz24">男衣</p>
                <div class="size-text">L</div>
              </n-gi>
              <n-gi>
                <img src="../assets/img/early-warning-d.png" />
                <p class="fz24">女衣</p>
                <div class="size-text ab">L</div>
              </n-gi>
            </n-grid>

            <n-grid :cols="2" class="cen red mt15">
              <n-gi class="fz24"> 手术鞋 库存不足预警 </n-gi>
              <n-gi class="fz24"> 手术衣 库存不足预警 </n-gi>
            </n-grid>
            <div class="early-warning-bottom mt10 cen display-flex">
              <div class="early-warning-bottom-left">
                <img src="../assets/img/Garbage-collection.png" />
                <p class="fz16 red">回收柜已满预警</p>
              </div>
              <div class="flex-1 ml25">
                <p class="early-warning-bottom-label">男鞋 01回收柜已满</p>
                <p class="early-warning-bottom-label mt10">男鞋 01回收柜已满</p>
              </div>
              <div class="flex-1 ml25">
                <p class="early-warning-bottom-label ab">女鞋 08回收柜已满</p>
                <p class="early-warning-bottom-label mt10 ab">
                  女衣 16回收柜已满
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="content page-border-style-e flex-1 mt20">
          <div class="content-title">
            <img
              src="../assets/img/content-title-icon-e.png"
              class="content-title-icon mr10"
            />
            设备使用趋势（进7天）
            <span></span>
          </div>

          <div class="panel-box ab h100">
            <div class="h100">
              <DeviceUsageTrend></DeviceUsageTrend>
            </div>
          </div>
        </div>
      </div>
      <div class="page-left h100 display-flex czbj ml20">
        <div class="content page-border-style-d flex-1">
          <div class="content-title">
            <img
              src="../assets/img/content-title-icon-f.png"
              class="content-title-icon mr10"
            />
            存衣柜、存鞋柜使用情况
            <span></span>
          </div>
          <div class="panel-box ab Your-wardrobe h100 cen">
            <div class="vertical-center">
              <div>
                <n-progress
                  type="circle"
                  :percentage="32"
                  :stroke-width="10"
                  color="#00B7FF"
                  rail-color="#000631"
                  :offset-degree="60"
                >
                  <div class="nowrap">
                    <span style="text-align: center" class="cf fz16">47套</span>
                  </div>
                </n-progress>
                <p class="fz16 cf mt10">存衣柜(男)使用率</p>
              </div>
            </div>

            <div class="vertical-center">
              <div>
                <n-progress
                  type="circle"
                  :percentage="32"
                  :stroke-width="10"
                  color="#00B7FF"
                  rail-color="#000631"
                  :offset-degree="60"
                >
                  <div class="nowrap">
                    <span style="text-align: center" class="cf fz16">47套</span>
                  </div>
                </n-progress>
                <p class="fz16 cf mt10">存鞋柜(男)使用率</p>
              </div>
            </div>

            <div class="vertical-center">
              <div>
                <n-progress
                  type="circle"
                  :percentage="32"
                  :stroke-width="10"
                  color="#FF4CA8 "
                  rail-color="#000631"
                  :offset-degree="60"
                >
                  <div class="nowrap">
                    <span style="text-align: center" class="cf fz16">47套</span>
                  </div>
                </n-progress>
                <p class="fz16 cf mt10">存衣柜(女)使用率</p>
              </div>
            </div>

            <div class="vertical-center">
              <div>
                <n-progress
                  type="circle"
                  :percentage="32"
                  :stroke-width="10"
                  color="#FF4CA8"
                  rail-color="#000631"
                  :offset-degree="60"
                >
                  <div class="nowrap">
                    <span style="text-align: center" class="cf fz16">47套</span>
                  </div>
                </n-progress>
                <p class="fz16 cf mt10">存鞋柜(女)使用率</p>
              </div>
            </div>
          </div>
        </div>
        <div class="content page-border-style-c mt30">
          <div class="content-title">
            <img
              src="../assets/img/content-title-icon-g.png"
              class="content-title-icon mr10"
            />
            回收衣柜、回收
            <span></span>
          </div>

          <div class="panel-box ab h100 cen Recycling-wardrobe">
            <div class="vertical-center">
              <div>
                <n-progress
                  type="circle"
                  :percentage="32"
                  :stroke-width="10"
                  color="#5162ED"
                  rail-color="#000631"
                  :offset-degree="60"
                >
                  <div class="nowrap">
                    <span style="text-align: center" class="cf fz16">47套</span>
                  </div>
                </n-progress>
                <p class="fz16 cf mt10">手术衣回收率</p>
              </div>
            </div>

            <div class="vertical-center">
              <div>
                <n-progress
                  type="circle"
                  :percentage="32"
                  :stroke-width="10"
                  color="#FFC57E"
                  rail-color="#000631"
                  :offset-degree="60"
                >
                  <div class="nowrap">
                    <span style="text-align: center" class="cf fz16">47套</span>
                  </div>
                </n-progress>
                <p class="fz16 cf mt10">手术鞋回收率</p>
              </div>
            </div>
          </div>
        </div>
        <div class="content page-border-style-c mt30">
          <div class="content-title">
            <img
              src="../assets/img/content-title-icon-h.png"
              class="content-title-icon mr10"
            />
            回收异常情况
            <span></span>
          </div>

          <div class="panel-box ab h100">
            <div class="display-flex tab-row">
              <div class="call-a">姓名</div>
              <div class="call-b">类型</div>
              <div class="flex-1">超过时长(单位：小时)</div>
            </div>
            <div class="abnormal-tab">
              <div class="list" id="abnormal-tab-list">
                <div
                  class="display-flex tab-row call"
                  v-for="(Sd, idx) in 30"
                  :key="idx"
                >
                  <div class="call-a">刘峰</div>
                  <div class="call-b">未还衣</div>
                  <div class="flex-1">{{ idx }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <RotatingBackground></RotatingBackground>
  </div>
</template>
<script lang='ts'>
var kkjse = "red";
</script>
<script lang='ts' setup>
import { ref } from "vue";
import { NProgress } from "naive-ui";
import {
  RotatingBackground,
  HorizontalProgress,
  DeviceUsageTrend,
} from "../components/index";

let yheight = ref();
yheight.value = "-" + 28 * 40 + "px";
</script>
<style scoped>
.page-box {
  padding-bottom: 90px;
}
.page-left {
  width: 484px;
}
.page-border-style-a {
  min-height: 258px;
  background: url(../assets/img/frameStylea.png);
  background-size: 100% 100%;
}
.page-border-style-b {
  height: 258px;
  background: url(../assets/img/frameStyleb.png);
  background-size: 100% 100%;
}
.page-border-style-c {
  height: 258px;
  background: url(../assets/img/frameStylec.png);
  background-size: 100% 100%;
}
.page-border-style-d {
  height: 258px;
  background: url(../assets/img/frameStyled.png);
  background-size: 100% 100%;
}

.page-border-style-e {
  height: 460px;
  background: url(../assets/img/frameStylee.png);
  background-size: 100% 100%;
  margin-top: -10px;
}
.content {
  position: relative;
}

.content-title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  line-height: 44px;
  font-size: 22px;
  color: #fef905;
  font-weight: 500;
}
.page-border-style-e .content-title {
  top: 10px;
}
.content-title span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 2px;
  background: url(../assets/img/transverseLine.png);
  background-size: 100% 100%;
  margin: auto;
}
.content-title-icon {
  position: relative;
  top: 2px;
}
.panel-box {
  padding-top: 60px;
  padding-right: 28px;
}
.panel-box.ab {
  padding-left: 28px;
}
.general-situation-box {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  justify-content: space-between;
  padding-bottom: 40px;
}
.Send-shoes-machine {
  padding-bottom: 15px;
}
.Send-shoes-machine-left {
  width: 224px;
  text-align: center;
}
.Send-shoes-machine-right {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.Send-shoes-machine-panel {
}
.Send-shoes-machine-panel-label {
  width: 58px;
  height: 100%;
  border: 2px solid #00b7ff;
  font-size: 22px;
  color: #fff;
}
.Send-shoes-machine-panel-label.girl {
  border: 2px solid #ff4ca8;
}
.Send-shoes-machine-panel-right {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 18px;
  grid-row-gap: 6px;
  padding-left: 18px;
}
.Send-shoes-machine-panel-right span {
  border: 1px solid #00b7ff;
  text-align: center;
  line-height: 23px;
}
.size-text {
  width: 48px;
  height: 48px;
  border: 2px solid #00a7ff;
  font-size: 24px;
  text-align: center;
  margin: auto;
  margin-top: 5px;
}
.size-text.ab {
  border-color: #ff4ca8;
}
.early-warning-bottom {
  border-top: 1px dashed #0beef9;
  padding-top: 15px;
  /* 
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 6px; */
}
.early-warning-bottom-label {
  height: 30px;
  background: #00a7ff;
  line-height: 30px;
  color: #fff;
  font-size: 18px;
}
.early-warning-bottom-left {
  width: 130px;
}
.early-warning-bottom-label.ab {
  background: #ff4ca8;
}
.Your-wardrobe {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
.Recycling-wardrobe {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
.call-a {
  width: 110px;
  padding-left: 10px;
}
.call-b {
  width: 120px;
}
.tab-row {
  font-size: 18px;
  color: #00fbff;
  line-height: 40px;
}
.tab-row.call {
  color: #fff;
}
.tab-row.call:nth-child(2n-1) {
  background: #003074;
}
.abnormal-tab {
  height: 140px;
  overflow: hidden;
}

.list {
  position: relative;
  top: 0px;
  left: 0px;
  height: 100%;
  list-style: none;
  animation: mymove 30s infinite linear;
}

@-webkit-keyframes mymove {
  from {
    top: 0px;
  }
  to {
    top: v-bind(yheight);
  }
}
</style>
